<template>
	<view class="user_register_container">
		<!-- banner -->
		<view class="banner_img_box">
			<image src="/static/login/img-login-bgi.png" mode="widthFix" class="banner_img"></image>
		</view>
		<view class="form_all">
			<view class="form_title">
				注册
			</view>

			<u-form :model="loginForm" ref="formLogin">
				<view class="form_input_box">
					<view class="input_top_box">
						<view class="top_icon_box">
							<image src="/static/login/icon-phone.png" mode="" class="top_icon"></image>
						</view>
						<view class="top_title">
							手机号
						</view>
					</view>
					<view class="">
						<u-form-item label="" prop="phoneNum" class="phont_input_line"><u-input
								v-model="loginForm.phoneNum" placeholder="请输入合伙人手机号" maxlength="11"
								:clearable="false" /></u-form-item>
					</view>
				</view>

				<view class="form_input_box">
					<view class="input_top_box">
						<view class="top_icon_box">
							<image src="/static/login/icon-code.png" mode="" class="top_icon"></image>
						</view>
						<view class="top_title">
							验证码
						</view>
					</view>
					<view class="code_input">
						<u-form-item label="" prop="phoneCode"><u-input v-model="loginForm.phoneCode"
								placeholder="请输入验证码" :clearable="false" /></u-form-item>
						<view class="" style="display: flex; justify-content: flex-end;">
							<button class="code_btn" size="mini" type="primary" :disabled="btnDis"
								@tap="sendCode">{{!codeTime?'获取验证码':codeTime+'s' + '后重新发送'}}</button>
						</view>
					</view>
				</view>

				<view class="form_input_box">
					<view class="input_top_box">
						<view class="top_icon_box">
							<image src="/static/login/icon-code.png" mode="" class="top_icon"></image>
						</view>
						<view class="top_title">
							密码
						</view>
					</view>
					<view class="code_input">
						<u-form-item label="" prop="password"><u-input v-model="loginForm.password" placeholder="请输入密码"
								:clearable="false" /></u-form-item>
					</view>
				</view>

				<!-- 我已阅读 -->
				<view class="read_box">
					<u-form-item label="" class="input_read">
						<u-checkbox-group @change="checkboxGroupChange">
							<view class="" style="display: flex; align-items: center;">
								<u-checkbox v-model="loginForm.radioRead" v-for="(item, index) in readList" :key="index"
									:name="item.name">
									{{item.name}}
								</u-checkbox>
								<span
									style="font-size: 22rpx;font-family: Source Han Sans CN;font-weight: 400;color: #237EFF;"
									@click="handlerRead(0)">《用户服务协议》</span>
								及
								<span
									style="font-size: 22rpx;font-family: Source Han Sans CN;font-weight: 400;color: #237EFF;"
									@click="handlerRead(1)">《隐私协议》</span>
							</view>
						</u-checkbox-group>
					</u-form-item>
				</view>
			</u-form>

			<view class="btn_box">
				<view class="login_btn" @click="handlerLogin">
					注 册
				</view>
				<view class="change_btn" @click="handlerChangeBtn()">
					已有账号，去登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					phoneNum: '',
					phoneCode: '',
					password: '',
					radioRead: false
				},
				readList: [{
					name: '我已阅读',
					disabled: false
				}],
				seconds: 60,
				btnDis: false, // 发送验证码按钮不禁用
				btnText: "发送验证码", // 提示
				codeTime: 0,
			}
		},
		methods: {
			checkboxGroupChange(e) {
			},

			// 发送验证码
			sendCode() {
				if (this.loginForm.phoneNum == '') {
					uni.showToast({
						title: '请输入合伙人手机号',
						icon: 'none'
					})
					return
				} else {
					// 开启倒计时
					this.countDown();
				}
			},

			// 验证码倒计时
			countDown() {
				if (this.codeTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: "none"
					});
					return;
				} else {
					this.getSms()
				}
			},

			// 发送验证码接口
			getSms() {
				const that = this
				this.$request('/fxuserGetSmsCode', {
					phone: this.loginForm.phoneNum
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
						that.codeTime = 60
						let timer = setInterval(() => {
							that.codeTime--;
							if (that.codeTime < 1) {
								clearInterval(timer);
								that.codeTime = 0
							}
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.codeTime = 0
						return
					}
				})
			},

			// 注册接口
			getRegister() {
				const that = this
				uni.request({
					url: 'https://saler.jkcae.com/app/fxuserRegisterPassword',
					method: 'POST',
					data: {
						phone: this.loginForm.phoneNum,
						password: this.loginForm.password,
						code: this.loginForm.phoneCode,
					},
					success: res => {
						if (res.data.code == 1) {
							uni.setStorageSync('h5-token', res.data.data.token)
							uni.setStorageSync('userInfo', res.data.data.userInfo)
							uni.showToast({
								title: '注册成功',
								icon: 'none',
								success: res => {
									setTimeout(() => {
										this.phoneValue = ''
										this.codeValue = ''
										this.passwordValue = ''
										// this.surePasswordValue = ''
										uni.switchTab({
											url: '/pages/index/index'
										})
									}, 1200)

								}
							})
						} else {
							uni.showToast({
								title: '注册失败',
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 注册按钮
			handlerLogin() {
				const that = this
				if (this.loginForm.phoneNum == '') {
					uni.showToast({
						title: '请输入合伙人手机号',
						icon: 'none'
					})
					return
				} else if (this.loginForm.phoneCode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else if (this.loginForm.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				} else if (this.loginForm.radioRead == '') {
					uni.showToast({
						title: '请勾选我已阅读',
						icon: 'none'
					})
					return
				}

				that.getRegister()
			},

			// 跳转登录
			handlerChangeBtn() {
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
				location.href = 'https://saler.jkcae.com/h5/#/pages/login/login'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user_register_container {

		.banner_img_box {
			position: relative;
			width: 100%;

			.banner_img {
				width: 100%;
				height: 100%;
			}
		}

		.form_all {
			position: absolute;
			top: 400rpx;
			width: 100%;
			// height: 943rpx;
			background: #FFFFFF;
			opacity: 0.9;
			border-radius: 30rpx 30rpx 0px 0px;
			padding: 54rpx 79rpx 53rpx;

			.form_title {
				font-size: 36rpx;
				font-family: FZLanTingHeiS-R-GB;
				font-weight: 400;
				color: #1A1A1A;
				text-align: center;
			}

			.tab_box {
				display: flex;
				justify-content: space-evenly;
				padding-top: 30rpx;

				.tab_all {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.tab_name {
						font-size: 28rpx;
						padding-bottom: 20rpx;
					}

					.tab_line {
						width: 50rpx;
						height: 2rpx;
						border-radius: 40rpx;
						background: transparent;
					}
				}

				.tab_all_active {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.tab_name {
						font-size: 28rpx;
						color: #4080fa;
						padding-bottom: 20rpx;
					}

					.tab_line {
						width: 50rpx;
						height: 2rpx;
						border-radius: 40rpx;
						background: #4080fa;
					}
				}
			}

			.form_input_box {
				padding-top: 61rpx;

				.input_top_box {
					display: flex;
					align-items: center;

					.top_icon_box {
						width: 32rpx;
						height: 32rpx;

						.top_icon {
							width: 100%;
							height: 100%;
						}
					}

					.top_title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						padding-left: 23rpx;
					}
				}

				.code_input {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.code_btn {
						height: 60rpx;
					}
				}
			}

			.register_tip_box {
				display: flex;
				justify-content: flex-end;
				padding-top: 18rpx;

				.forget_title {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ccc;
				}

				.register_tip {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #3488FE;
				}
			}


			.input_read {

				::v-deep .u-radio__label {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #808080;
				}

			}

			.btn_box {
				padding-top: 36rpx;

				.login_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 75rpx;
					background: linear-gradient(1deg, #55CDFF, #5692FF);
					border-radius: 38rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					margin-bottom: 31rpx;
				}

				.change_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 75rpx;
					background: #E2F2FF;
					border-radius: 38rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #3488FE;
				}
			}
		}
	}
</style>